<template>
  <div class="">
    <table>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in $store.state.list" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.city }}</td>
        <td>
          <input
            @click="edit(index)"
            value="修改"
            type="button"
            :disabled="$store.state.lock"
          />
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    edit(index) {
      this.$store.state.flag = true;

      this.$store.commit("edit", index);
    },
  },
  components: {},
};
</script>

<style lang="scss"></style>
